<template>
  <view class="login-container">
    <!-- Logo区域 -->
    <view class="logo-section">
      <image class="logo" src="http://113.45.222.55:9000/doubao/avatar.jpg" mode="aspectFit"/>
      <text class="title">糯米智能</text>
      <text class="description">欢迎使用糯米智能客服，体验智能对话。</text>
    </view>

    <!-- 登录说明区域 -->
    <view class="feature-section">
      <text class="feature-title">登录后可享受以下功能</text>
      <view class="feature-list">
        <view class="feature-item">
          <text class="dot">•</text>
          <text>保存聊天记录与偏好设置</text>
        </view>
        <view class="feature-item">
          <text class="dot">•</text>
          <text>获得个性化AI助手服务</text>
        </view>
        <view class="feature-item">
          <text class="dot">•</text>
          <text>创建个性化智能体</text>
        </view>
      </view>
    </view>

    <!-- 登录方式选择区域 -->
    <view class="login-section">
      <!-- 微信登录按钮 -->
      <button 
        class="login-btn wechat" 
        open-type="getPhoneNumber"
        @getphonenumber="handleGetPhoneNumber"
      >
        <text class="iconfont icon-wechat"/>
        一键快捷登录
      </button>

      <!-- 暂不登录按钮 -->
      <button 
        class="login-btn skip"
        @tap="handleSkipLogin"
      >
        暂不登录，继续体验
      </button>
    </view>

    <!-- 协议区域 - 不默认勾选 -->
    <view class="agreement">
      <checkbox-group @change="handleAgreeChange">
        <checkbox :value="1" :checked="isAgree" style="transform: scale(0.7);"/>
        <text class="agreement-text">我已阅读并同意</text>
        <text class="link" @tap="showAgreement">《服务协议》</text>
        <text class="agreement-text">和</text>
        <text class="link" @tap="showPrivacy">《隐私政策》</text>
      </checkbox-group>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { useUserStore } from '@/stores'

const userStore = useUserStore()
const isAgree = ref(false)

// 处理协议勾选
const handleAgreeChange = (e) => {
  isAgree.value = e.detail.value.length > 0
}

// 处理获取手机号
const handleGetPhoneNumber = async (e) => {
  if (!isAgree.value) {
    uni.showModal({
      title: '提示',
      content: '请先阅读并同意服务协议和隐私政策',
      showCancel: false
    })
    return
  }

  if (e.detail.errMsg === 'getPhoneNumber:ok') {
    try {
      // 获取登录code
      const { code } = await uni.login()
      
      // 调用登录接口
      await userStore.wxLogin({
        code,
        encryptedData: e.detail.encryptedData,
        iv: e.detail.iv
      })

      uni.showToast({
        title: '登录成功',
        icon: 'success',
        duration: 1500
      })

      setTimeout(() => {
        uni.reLaunch({
          url: '/pages/index/index'
        })
      }, 1500)
    } catch (error) {
      console.error('登录失败:', error)
      uni.showToast({
        title: '登录失败，请重试',
        icon: 'none'
      })
    }
  }
}

// 暂不登录
const handleSkipLogin = () => {
  uni.reLaunch({
    url: '/pages/index/index'
  })
}

// 查看协议
const showAgreement = () => {
  uni.navigateTo({
    url: '/pages/privacy/privacy?type=agreement'
  })
}

// 查看隐私政策
const showPrivacy = () => {
  uni.navigateTo({
    url: '/pages/privacy/privacy?type=privacy'
  })
}
</script>

<style lang="scss">
.login-container {
  min-height: 100vh;
  padding: 0 60rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;

  .logo-section {
    margin-top: 120rpx;
    display: flex;
    flex-direction: column;
    align-items: center;

    .logo {
      width: 180rpx;
      height: 180rpx;
      margin-bottom: 24rpx;
    }

    .title {
      font-size: 48rpx;
      font-weight: 600;
      color: #333;
      margin-bottom: 12rpx;
    }

    .description {
      font-size: 28rpx;
      color: #666;
      text-align: center;
      line-height: 1.5;
    }
  }

  .feature-section {
    width: 100%;
    margin-top: 60rpx;
    padding: 0 20rpx;

    .feature-title {
      font-size: 32rpx;
      color: #333;
      margin-bottom: 24rpx;
    }

    .feature-list {
      .feature-item {
        display: flex;
        align-items: flex-start;
        margin-bottom: 16rpx;
        font-size: 28rpx;
        color: #666;

        .dot {
          margin-right: 8rpx;
          color: #333;
        }
      }
    }
  }

  .login-section {
    width: 100%;
    margin-top: 80rpx;

    .login-btn {
      width: 100%;
      height: 88rpx;
      margin-bottom: 24rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32rpx;
      border-radius: 44rpx;

      .iconfont {
        font-size: 40rpx;
        margin-right: 12rpx;
      }

      &.wechat {
        background: #07C160;
        color: #fff;
      }

      &.skip {
        background: #F5F5F5;
        color: #666;
      }
    }
  }

  .agreement {
    position: fixed;
    bottom: 60rpx;
    font-size: 24rpx;
    text-align: center;

    .agreement-text {
      color: #999;
    }

    .link {
      color: #07C160;
      display: inline;
    }

    checkbox {
      margin-right: 8rpx;
    }
  }
}
</style>